<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理 - 厨房管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 新拟物化风格 */
        .neumorphic {
            background: #f0f0f3;
            box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
        }
        
        .neumorphic-inset {
            background: #f0f0f3;
            box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
        }
        
        .neumorphic-btn {
            background: #f0f0f3;
            box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
            transition: all 0.3s ease;
        }
        
        .neumorphic-btn:hover {
            box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
        }
        
        .neumorphic-card {
            background: #f0f0f3;
            box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;
            transition: all 0.3s ease;
        }
        
        /* iPhone 16 Pro 样式 */
        .iphone-container {
            width: 390px;
            height: 844px;
            border-radius: 55px;
            overflow: hidden;
            position: relative;
            background: #000;
            padding: 10px;
        }
        
        .iphone-screen {
            width: 100%;
            height: 100%;
            border-radius: 45px;
            overflow: hidden;
            background: #f0f0f3;
            position: relative;
        }
        
        /* 状态栏样式 */
        .status-bar {
            height: 44px;
            background: #f0f0f3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px;
            font-size: 14px;
            font-weight: 600;
        }
        
        /* 动态岛 */
        .dynamic-island {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 126px;
            height: 37px;
            background: #000;
            border-radius: 20px;
            z-index: 10;
        }
        
        /* 标签页切换 */
        .tab-active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        /* 订单状态标签 */
        .status-pending {
            background: #fef3c7;
            color: #d97706;
        }
        
        .status-completed {
            background: #d1fae5;
            color: #059669;
        }
        
        /* 动画效果 */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .slide-in {
            animation: slideIn 0.3s ease-out;
        }
        
        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f0f0f3;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #d1d1d1;
            border-radius: 2px;
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="iphone-container">
        <div class="iphone-screen">
            <!-- 动态岛 -->
            <div class="dynamic-island"></div>
            
            <!-- 状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex gap-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
            
            <!-- 顶部导航 -->
            <div class="px-6 py-4 flex items-center justify-between">
                <i class="fas fa-arrow-left text-xl text-gray-700 cursor-pointer" onclick="window.history.back()"></i>
                <h2 class="text-xl font-bold text-gray-800">订单管理</h2>
                <i class="fas fa-filter text-xl text-gray-700 cursor-pointer"></i>
            </div>
            
            <!-- 统计卡片 -->
            <div class="px-6 mb-4">
                <div class="grid grid-cols-3 gap-3">
                    <div class="neumorphic-card rounded-2xl p-4 text-center">
                        <p class="text-2xl font-bold text-gray-800">12</p>
                        <p class="text-xs text-gray-600 mt-1">今日订单</p>
                    </div>
                    <div class="neumorphic-card rounded-2xl p-4 text-center">
                        <p class="text-2xl font-bold text-orange-600">3</p>
                        <p class="text-xs text-gray-600 mt-1">待烹饪</p>
                    </div>
                    <div class="neumorphic-card rounded-2xl p-4 text-center">
                        <p class="text-2xl font-bold text-green-600">9</p>
                        <p class="text-xs text-gray-600 mt-1">已完成</p>
                    </div>
                </div>
            </div>
            
            <!-- 标签页 -->
            <div class="px-6 mb-4">
                <div class="neumorphic-inset rounded-2xl p-1 flex">
                    <button class="flex-1 py-3 rounded-xl tab-active font-medium transition-all" onclick="switchTab('pending')">
                        待烹饪 <span class="ml-1 bg-white bg-opacity-30 px-2 py-0.5 rounded-full text-xs">3</span>
                    </button>
                    <button class="flex-1 py-3 rounded-xl text-gray-600 font-medium transition-all" onclick="switchTab('completed')">
                        已完成
                    </button>
                </div>
            </div>
            
            <!-- 订单列表 -->
            <div class="px-6 pb-20 h-full overflow-y-auto custom-scrollbar">
                <!-- 待烹饪订单 -->
                <div id="pendingOrders" class="space-y-4">
                    <!-- 订单卡片1 -->
                    <div class="neumorphic-card rounded-2xl p-4 slide-in">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <p class="text-sm text-gray-500">订单号 #2024090301</p>
                                <p class="text-lg font-semibold text-gray-800 mt-1">今日晚餐</p>
                            </div>
                            <span class="px-3 py-1 status-pending rounded-full text-xs font-medium">待烹饪</span>
                        </div>
                        
                        <div class="space-y-2 mb-3">
                            <div class="flex items-center gap-2">
                                <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=40&h=40&fit=crop" alt="番茄炒蛋" class="w-10 h-10 rounded-lg object-cover">
                                <span class="text-gray-700">番茄炒蛋 x1</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <img src="https://images.unsplash.com/photo-1547592180-85f173990554?w=40&h=40&fit=crop" alt="紫菜蛋花汤" class="w-10 h-10 rounded-lg object-cover">
                                <span class="text-gray-700">紫菜蛋花汤 x1</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-500">
                                <i class="fas fa-clock"></i> 18:00
                            </div>
                            <div class="flex gap-2">
                                <button class="neumorphic-btn rounded-xl px-4 py-2 text-sm" onclick="addNote()">
                                    <i class="fas fa-comment-dots"></i> 备注
                                </button>
                                <button class="neumorphic-btn rounded-xl px-4 py-2 bg-green-600 text-white text-sm" onclick="completeOrder(this)">
                                    <i class="fas fa-check"></i> 完成
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 订单卡片2 -->
                    <div class="neumorphic-card rounded-2xl p-4 slide-in">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <p class="text-sm text-gray-500">订单号 #2024090302</p>
                                <p class="text-lg font-semibold text-gray-800 mt-1">明日午餐</p>
                            </div>
                            <span class="px-3 py-1 status-pending rounded-full text-xs font-medium">待烹饪</span>
                        </div>
                        
                        <div class="space-y-2 mb-3">
                            <div class="flex items-center gap-2">
                                <img src="https://images.unsplash.com/photo-1516684669134-de6f7c473a2a?w=40&h=40&fit=crop" alt="红烧肉" class="w-10 h-10 rounded-lg object-cover">
                                <span class="text-gray-700">红烧肉 x1</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=40&h=40&fit=crop" alt="炒青菜" class="w-10 h-10 rounded-lg object-cover">
                                <span class="text-gray-700">炒青菜 x1</span>
                                <span class="text-xs text-gray-500">(不要葱)</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-500">
                                <i class="fas fa-clock"></i> 明日 12:00
                            </div>
                            <div class="flex gap-2">
                                <button class="neumorphic-btn rounded-xl px-4 py-2 text-sm" onclick="addNote()">
                                    <i class="fas fa-comment-dots"></i> 备注
                                </button>
                                <button class="neumorphic-btn rounded-xl px-4 py-2 bg-green-600 text-white text-sm" onclick="completeOrder(this)">
                                    <i class="fas fa-check"></i> 完成
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 订单卡片3 -->
                    <div class="neumorphic-card rounded-2xl p-4 slide-in">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <p class="text-sm text-gray-500">订单号 #2024090303</p>
                                <p class="text-lg font-semibold text-gray-800 mt-1">今日晚餐</p>
                            </div>
                            <span class="px-3 py-1 status-pending rounded-full text-xs font-medium">待烹饪</span>
                        </div>
                        
                        <div class="space-y-2 mb-3">
                            <div class="flex items-center gap-2">
                                <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=40&h=40&fit=crop" alt="意大利面" class="w-10 h-10 rounded-lg object-cover">
                                <span class="text-gray-700">意大利面 x1</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-500">
                                <i class="fas fa-clock"></i> 19:00
                            </div>
                            <div class="flex gap-2">
                                <button class="neumorphic-btn rounded-xl px-4 py-2 text-sm" onclick="addNote()">
                                    <i class="fas fa-comment-dots"></i> 备注
                                </button>
                                <button class="neumorphic-btn rounded-xl px-4 py-2 bg-green-600 text-white text-sm" onclick="completeOrder(this)">
                                    <i class="fas fa-check"></i> 完成
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 已完成订单（默认隐藏） -->
                <div id="completedOrders" class="space-y-4 hidden">
                    <!-- 订单卡片4 -->
                    <div class="neumorphic-card rounded-2xl p-4 opacity-75">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <p class="text-sm text-gray-500">订单号 #2024090205</p>
                                <p class="text-lg font-semibold text-gray-800 mt-1">昨日晚餐</p>
                            </div>
                            <span class="px-3 py-1 status-completed rounded-full text-xs font-medium">已完成</span>
                        </div>
                        
                        <div class="space-y-2 mb-3">
                            <div class="flex items-center gap-2">
                                <img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=40&h=40&fit=crop" alt="蒸蛋羹" class="w-10 h-10 rounded-lg object-cover">
                                <span class="text-gray-700">蒸蛋羹 x1</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=40&h=40&fit=crop" alt="炒青菜" class="w-10 h-10 rounded-lg object-cover">
                                <span class="text-gray-700">炒青菜 x1</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-500">
                                <i class="fas fa-clock"></i> 昨日 18:30
                            </div>
                            <div class="text-sm text-gray-500">
                                <i class="fas fa-user-check"></i> 已用餐
                            </div>
                        </div>
                    </div>
                    
                    <!-- 更多已完成订单... -->
                    <div class="neumorphic-card rounded-2xl p-4 opacity-75">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <p class="text-sm text-gray-500">订单号 #2024090204</p>
                                <p class="text-lg font-semibold text-gray-800 mt-1">昨日午餐</p>
                            </div>
                            <span class="px-3 py-1 status-completed rounded-full text-xs font-medium">已完成</span>
                        </div>
                        
                        <div class="space-y-2 mb-3">
                            <div class="flex items-center gap-2">
                                <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=40&h=40&fit=crop" alt="番茄炒蛋" class="w-10 h-10 rounded-lg object-cover">
                                <span class="text-gray-700">番茄炒蛋 x1</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-500">
                                <i class="fas fa-clock"></i> 昨日 12:00
                            </div>
                            <div class="text-sm text-gray-500">
                                <i class="fas fa-user-check"></i> 已用餐
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="absolute bottom-0 left-0 right-0 neumorphic-inset rounded-t-3xl">
                <div class="flex justify-around py-4">
                    <div class="text-center">
                        <i class="fas fa-home text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">首页</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-search text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">搜索</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-plus-circle text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">添加</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-user text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">我的</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 备注模态框 -->
    <div id="noteModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-3xl p-6 w-80 mx-4">
            <h3 class="text-xl font-bold text-gray-800 mb-4">添加备注</h3>
            <textarea class="w-full neumorphic-inset rounded-xl px-4 py-3 mb-4" rows="4" placeholder="请输入备注信息..."></textarea>
            <div class="flex gap-3">
                <button class="flex-1 neumorphic-btn rounded-xl py-3 text-gray-600" onclick="closeNoteModal()">取消</button>
                <button class="flex-1 neumorphic-btn rounded-xl py-3 bg-purple-600 text-white" onclick="saveNote()">保存</button>
            </div>
        </div>
    </div>
    
    <script>
        function switchTab(tab) {
            const tabs = document.querySelectorAll('button[onclick^="switchTab"]');
            const pendingOrders = document.getElementById('pendingOrders');
            const completedOrders = document.getElementById('completedOrders');
            
            tabs.forEach(t => {
                t.classList.remove('tab-active');
                t.classList.add('text-gray-600');
            });
            
            if (tab === 'pending') {
                tabs[0].classList.add('tab-active');
                tabs[0].classList.remove('text-gray-600');
                pendingOrders.classList.remove('hidden');
                completedOrders.classList.add('hidden');
            } else {
                tabs[1].classList.add('tab-active');
                tabs[1].classList.remove('text-gray-600');
                pendingOrders.classList.add('hidden');
                completedOrders.classList.remove('hidden');
            }
        }
        
        function completeOrder(button) {
            const orderCard = button.closest('.neumorphic-card');
            const statusBadge = orderCard.querySelector('.status-pending');
            
            // 更新状态
            statusBadge.classList.remove('status-pending');
            statusBadge.classList.add('status-completed');
            statusBadge.textContent = '已完成';
            
            // 移除操作按钮
            const buttonContainer = button.parentElement;
            buttonContainer.innerHTML = '<div class="text-sm text-green-600"><i class="fas fa-check-circle"></i> 已完成</div>';
            
            // 添加完成动画
            orderCard.style.transform = 'scale(0.98)';
            setTimeout(() => {
                orderCard.style.transform = 'scale(1)';
            }, 200);
            
            // 更新统计数据
            updateStats();
        }
        
        function updateStats() {
            // 这里可以更新顶部的统计数据
            const pendingCount = document.querySelectorAll('.status-pending').length;
            const completedCount = document.querySelectorAll('.status-completed').length;
            
            // 更新显示
            document.querySelector('.text-orange-600').textContent = pendingCount;
            document.querySelector('.text-green-600').textContent = completedCount;
        }
        
        function addNote() {
            document.getElementById('noteModal').style.display = 'flex';
        }
        
        function closeNoteModal() {
            document.getElementById('noteModal').style.display = 'none';
        }
        
        function saveNote() {
            // 保存备注逻辑
            alert('备注已保存');
            closeNoteModal();
        }
    </script>
</body>
</html>